<script setup lang="ts">
import homeApi from '@/service/api/home'
import { useApi } from '@/hooks/useApi'
import { useAppsStore } from '@/stores/modules/app'
import { timeAgoTwo } from '@/utils'

const { width } = useWindowSize()
const useStore = useAppsStore()
const { setLoginShow } = useStore
const { getUserInfo: userInfo } = storeToRefs(useStore)
defineOptions({
  name: 'Classify'
})

interface listItem {
  id: number
  cover: string
  name: string
  book_type: number
  photo_count: number
  video_count: number
}

const router = useRouter()
const handDetail = (e: listItem) => {
  if (!userInfo.value?.id) {
    setLoginShow(true)
    return
  }
  router.push({
    path: e.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.id
    }
  })
}
let requestSize = 0
if (width.value <= 800) {
  requestSize = 10
} else if (width.value <= 1300) {
  requestSize = 12
} else {
  requestSize = 16
}
const { tableInfo, pageChange, sizeChange, queryData } = useApi({
  getData: homeApi.selected,
  initForm: {
    fee: true,
    author_id: null,
    current: 1,
    id: null,
    institution_id: null,
    keyword: '',
    order: 'view',
    orderType: 'desc',
    size: requestSize,
    tags: null,
    sortType: 1
  }
})

function IsPhone() {
  var info = navigator.userAgent
  return /mobile/i.test(info)
}

const isMoile = ref(IsPhone())
</script>

<template>
  <div class="classify-page">
    <div class="tabs">
      <n-tabs
        v-model:value="tableInfo.queryForm.fee"
        style="width: 200px"
        type="segment"
        animated
        @update:value="queryData"
      >
        <n-tab-pane :name="true" tab="免费"></n-tab-pane>
        <n-tab-pane :name="false" tab="付费"></n-tab-pane>
      </n-tabs>
    </div>
    <n-spin :show="tableInfo.listLoading">
      <div class="list">
        <div
          class="card"
          v-for="item in tableInfo.tableData"
          :key="item.id"
          @click="handDetail(item)"
        >
          <div class="cover">
            <img v-lazy="$getImg(item.cover)" />
          </div>
          <div class="name u-line-1">{{ item.name }}</div>
          <div class="tags">
            <div class="tag free" v-if="item.price === 0">限免</div>
            <div class="tag free" v-else>{{ item.price }}币</div>
            <div class="tag">{{ item.photo_count }}图</div>
            <div class="tag">{{ item.video_count }}视频</div>
          </div>
          <div class="tool">
            <div class="date">
              {{ timeAgoTwo(item.create_at) }}
            </div>
            <div class="desc">
              <span>{{ item.buy_count }}购买</span>
              <span style="padding-left: 5px">{{ item.coll_count }}收藏</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination" v-if="tableInfo.total > 1">
        <n-pagination
          v-model:page="tableInfo.queryForm.current"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          :simple="isMoile"
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </n-spin>
  </div>
</template>

<style scoped lang="scss">
.classify-page {
  min-height: calc(100vh - 55px);
  padding: 0 40px;
  background: #f2f2f2;

  .tabs {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.filter {
  padding-top: 30px;
  padding-bottom: 31px;
  border-bottom: 1px solid #dddddd;

  .row {
    display: flex;

    &:not(:first-child) {
      margin-top: 21px;
    }

    .label {
      width: 90px;
      font-size: 17px;
      font-weight: 400;
    }

    .btns {
      margin-left: 10px;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .btn {
        font-size: 17px;
        padding: 0 14px;
        height: 30px;
      }
    }

    &:last-child {
      .label {
        //letter-spacing: 14px;
      }
    }
  }
}

.list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 20px 0 0;
  gap: 20px;

  .card {
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;

    .cover {
      img {
        width: 100%;
        aspect-ratio: 4/5.5;
        object-fit: cover;
        -webkit-user-drag: none;
        display: block;
        border-radius: 5px;
      }
    }

    .name {
      font-size: 14px;
      margin-top: 10px;
      color: #333;
      padding: 0 5px;
    }

    .tags {
      margin-top: 5px;
      padding: 0 5px;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;

      .tag {
        font-size: 10px;
        background: rgba(136, 136, 136, 0.1);
        padding: 0 6px;
        border-radius: 4px;
        color: #888;
      }

      .free {
        background: linear-gradient(
          317deg,
          #4d4c4c 30%,
          #7b7b7b 70%,
          #5f5c5c 100%
        );
        color: #ddd;
      }
    }

    .tool {
      margin-top: 8px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 0 5px 10px 5px;

      .date {
        font-size: 12px;
        color: #999;
      }

      .desc {
        margin-top: 0;
        padding: 0 5px;
        color: #999;
        font-size: 12px;
      }
    }
  }
}

.pagination {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 1300px) {
  .list {
    gap: 20px 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .classify-page {
    padding: 0 12px;

    .tabs {
      padding-top: 10px;
    }
  }
  .filter {
    padding-top: 20px;
    padding-bottom: 21px;

    .row {
      flex-direction: column;

      &:not(:first-child) {
        margin-top: 11px;
      }

      .label {
        width: 70px;
        font-size: 14px;
      }

      .btns {
        margin-top: 10px;
        margin-left: 0;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .btn {
          font-size: 12px;
          padding: 0 10px;
          height: 22px;
        }
      }

      &:last-child {
        .label {
          //letter-spacing: 14px;
        }
      }
    }
  }
  .list {
    margin: 0;
    grid-template-columns: 1fr 1fr;

    .card {
      .cover {
        img {
          height: 180px;
        }
      }

      .name {
        font-weight: 550;
        font-size: 12px;
        margin-top: 5px;
      }

      .desc {
        margin-top: 0;
        color: #999;
        font-size: 11px;
      }
    }
  }
  .pagination {
    padding: 20px 0;
  }
}
</style>
